<?php
	/* home/index.ctp */
?>
<script>
function mouseover(control)
{
	if (document.images)
	{
		control.style.backgroundImage = 'url(../img/m2/masthead_button_over.png)'
	}
}
function onmouseout(control)
{
	control.style.backgroundImage = 'url(../img/m2/masthead_button.png)';
}
</script>
<style>
.adv_button{
	background: transparent url(../img/m2/masthead_button.png) no-repeat scroll left top; 
	display: block; 
	-moz-background-clip: border; 
	-moz-background-origin: padding; 
	-moz-background-inline-policy: continuous; 
	width: 203px; 
	height: 31px; 
	position: absolute; 
	top: 155px; 
	left: 0px;
}
.masthead_show
{
	position: relative;
}
.masthead_show img
{
	width:520px;
}
</style>
<div class="title_img_center span-4 last" style="margin-top: -17px; margin-bottom: 0px;">
&nbsp;
</div>
<div style="visibility: visible; display: block;" class="mboxDefault">
	<div id="masthead" style="height:auto;">
		
		<?php $i = 1; foreach ($banners as $b) {?>
			<?php if ($i == 1) {?>
			<div id="masthead_<?php echo $i?>" class="masthead_show">
			<?php } else {?> 
			<div id="masthead_<?php echo $i?>" class="masthead_hidden">
			<?php }?>
			<?php echo $html->image($b['Banner']['images'])?> 
			</div>
		<?php $i++; }?>
		
		<div style="width:100%; clear:both; font-size:1px;">&nbsp;</div>
		
	</div>
	<div style="text-align:right; display:none">
		<div style="width:100%; clear:right; font-size:2px;">&nbsp;</div>
		<div style="font-size:12px; height:auto; ">
			<ul id="masthead-nav" style=" float:right;">
	        	<li class="prev"><a href="javascript:a()" onclick="mastprev();return false;"></a></li>
	            <li>
	            	<a class="mast_a_selected" style="color: rgb(170, 8, 40);" id="mast_a1" href="javascript:a()" onclick="mastnav(1);mastheadposition('but1left'); return false;">1</a>
	 			</li>
				<li>
	            	<a class="mast_a_notselected" id="mast_a2" href="javascript:a()" onclick="mastnav(2); mastheadposition('but2left'); return false;">2</a>
	            </li>
	            <li>
	            <a class="mast_a_notselected" id="mast_a3" href="javascript:a()" onclick="mastnav(3); mastheadposition('but3left'); return false;">3</a>
	            </li>
	            <li>
	            <a class="mast_a_notselected" id="mast_a4" href="javascript:a()" onclick="mastnav(4); mastheadposition('but4left'); return false;">4</a></li>
	            <li>
	            <a class="mast_a_notselected" id="mast_a5" href="javascript:a()" onclick="mastnav(5); mastheadposition('but5left'); return false;">5</a></li>
	            <li class="next"><a href="javascript:a()" onclick="mastnext();return false;"></a></li>
			</ul>
		</div>
		<div style="width:100%; clear:right; font-size:0px;">&nbsp;</div>
	</div>
	<div class="end_div_center span-4 last">&nbsp;</div>
</div>


<div class=" span-4 last" style="width:395px;">
&nbsp;
</div>
<div class="title_img_center span-4 last" >
	<span>
	Sản phẩm mới nhất
	</span>
</div>
<div id="newestProduct">
	<div class="span-4 last">
		<div class="product-item span-4 last" style="width:517px;">
			<div style="width: 500px; margin: auto;">
			<?php
			$i = 0;
			foreach ($newestProduct as $product)
			{
				$i++;
			?>
				<div style="float: left; <?php echo ($i%2!=0) ? 'border-right:solid 1px #0484df;width: 235px;margin:5px;':'width: 230px;margin:5px;'?>">
					<div style="width: 240px; margin: auto;">
						<a href="<?php echo $html->url('product/' . $product['Product']['id'])?>">
						<?php echo $html->image($product['Product']['images'], array('style'=>'width: 235px;'))?>
						</a>
					</div>
					<div style="text-align: center;">
						<?php echo $html->link('Chi tiết','/home/product/'.$product['Product']['id'], array('class' => 'button-ogrange'))?>
					</div>
				</div>
			<?php 
			} // end foreach
			?>
			<div style="clear: both;"></div>
			</div>
		</div>
	</div>
</div>
<div class="end_div_center span-4 last"></div>
<div class=" span-4 last" style="width:395px;">
&nbsp;
</div>
<div class="title_img_center span-4 last" >
	<span>
	Sản phẩm bán chạy nhất
	</span>
</div>
<div id="hotestProduct">
	<div class="span-4 last" >
		<div class="product-item span-4 last" style="width:517px;">
			<div style="width: 500px; margin: auto;">
			<?php
			$i=0;
			foreach ($hotestProduct as $product)
			{
			$i++;
			?>
				<div style="float: left; <?php echo ($i%2!=0) ? 'border-right:solid 1px #0484df;width: 235px;margin:5px;':'width: 230px;margin:5px;'?>">
					<div style="width: 240px; margin: auto;">
						<a href="<?php echo $html->url('product/' . $product['Product']['id'])?>">
						<?php echo $html->image($product['Product']['images'], array('style'=>'width: 235px;'))?>
						</a>
					</div>
					<div style="text-align: center;">
						<?php echo $html->link('Chi tiết','/home/product/'.$product['Product']['id'], array('class' => 'button-ogrange'))?>
					</div>
				</div>
			<?php 
			} // end foreach
			?>
			<div style="clear: both;"></div>
			</div>
		</div>
	</div>
</div>
<div class="end_div_center span-4 last"></div>